<template>
  <div class="content">
    <div class="fc">
      <el-scrollbar class="scrollbar">
        <div :class="{ scrollbarItem: true, check: firstOperate == idx }" 
             v-for="(item, idx) in fcs" 
             :key="item.URL" 
             @click="clickTag(idx, item.URL)">
          <div :class="{ firstNav: true, check: firstOperate === idx }">
            <div style="margin-left: 20px;display: flex;align-items: center;" v-html="getSvg(item.icon, 20)"></div>
            &nbsp;
            &nbsp;
            <div class="firstNav_Txt">
              {{ item.title }} 
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <LeftSecondNav></LeftSecondNav>
    <div class="realize">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, inject, watch } from 'vue';
import { House } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import LeftSecondNav from '@/components/LeftSecondNav/index.vue'
import { getSvg } from '@/common/svg'

// 父通信
const props=defineProps({
  // 业务列表
  operationList:{
    type:Array,
    default:null
  },
  // 当前业务
  checkOperation:{
    type:Number,
    default:null
  }
})
// 子传父通信
const emit=defineEmits(["submitChange"])

// 获取路由实例和当前路由
const $router = useRouter();
const route = useRoute();

// 获取 Main 路由的子路由信息，过滤掉不需要的路由项
const mainRoutes = computed(() => {
  const mainRoute = $router.getRoutes().find(r => r.name === 'Video');
  return mainRoute?.children
    .filter(child => child.meta?.title && child.path !== '' && !child.redirect)  // 过滤掉 redirect 路由
    .map(child => ({
      title: child.meta.title,           // 使用 meta.title
      URL: child.path,                   // 获取路径
      fullPath: mainRoute.path + '/' + child.path,  // 拼接完整路径
      icon:child.meta.icon
    })) || [];
});

// 将动态路由信息存储到 reactive 对象中
let fcs = reactive(mainRoutes.value);

// 当前选中的导航项
let firstOperate = ref(0);

// 点击导航项跳转
const clickTag = (idx, url) => {
  firstOperate.value = idx; // 设置选中的导航项
  $router.push({
    path:url,
    query:route.query
  });        // 跳转到目标路由
};

// 初始化选中状态，根据当前路由动态设置选中的导航项
onMounted(() => {
  const matchedRoute = fcs.find(item => route.fullPath.startsWith(item.fullPath));
  if (matchedRoute) {
    firstOperate.value = fcs.indexOf(matchedRoute);
  }
});
</script>

<style scoped lang="scss">
@use "@/styles/business-scrollbar.scss";
</style>